<template>
  <div class="app-container">
    <el-row>
      <!-- S 文档查阅左侧组件 -->
      <el-col :span="4" class="left">
        <LeftMenu :cateList="cateList" @nodeClick="nodeClick"></LeftMenu>
      </el-col>
      <!-- E 文档查阅左侧组件 -->
      <!-- S 文档查阅搜索列表组件 -->
      <el-col :span="16" class="middle">
        <div class="search">
          <el-input
            placeholder="请输入关键字"
            v-model="queryParams.searchValue"
            clearable
            size="large"
            class="w450"
            width="200px"
            maxlength="200"
            @keyup.enter="handleQuery"
          />
          <el-button
            type="primary"
            icon="Search"
            class="btn"
            size="large"
            @click="handleQuery"
            >搜索</el-button
          >
        </div>
        <div
          style="
            height: 100%;
            display: flex;
            width: 100%;
            flex-direction: column;
            justify-content: space-between;
          "
        >
          <FileList
            class="file-list"
            :cateList="cateList"
            :fileList="fileList"
            @submit="fileAction"
            @view="view"
          ></FileList>
          <Pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.curPage"
            v-model:limit="queryParams.pageSize"
            @pagination="getFileList"
          />
        </div>
      </el-col>
      <!-- E 文档查阅搜索列表组件 -->
      <!-- S 文档查阅右侧组件 -->
      <el-col :span="4" class="right"><RightList></RightList></el-col>
      <!-- E 文档查阅右侧组件 -->
    </el-row>
    <!-- S 编辑弹窗 -->
    <ApprovalDialog
      v-if="approvalOpen"
      :open="approvalOpen"
      :currentFile="currentFile"
      @submit="editSubmit"
      @close="editClose"
      @apply="apply"
    ></ApprovalDialog>
    <!-- E 编辑弹窗 -->
  </div>
</template>

<script setup name="documentConsultFile">
import LeftMenu from './leftMenu.vue'
import FileList from './fileList.vue'
import RightList from './rightList.vue'
import {
  getFile,
  approval,
  getCategoryListSelect,
  moveFile,
  copyFile,
} from '@/api/fileManager'
import { handleTree } from '@/utils/index'
import ApprovalDialog from './approvalDialog.vue'
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const loading = ref(false)
let approvalOpen = ref(false)
const currentFile = ref({})
function view(item) {
  currentFile.value = item
  approvalOpen.value = true
}

function apply() {
  approvalOpen.value = true
}

function editClose() {
  approvalOpen.value = false
  router.replace(route.path) //清空地址栏参数
}

function editSubmit(val) {
  val['fileId'] = currentFile.value.id
  approval(val).then((res) => {
    proxy.$message.success(res.msg)
    approvalOpen.value = false
  })
}

function nodeClick(node) {
  queryParams.searchValue = ''
  queryParams.categoryId = node.id
  initList(queryParams)
}

function initList(_queryParams) {
  loading.value = true
  getFile(_queryParams)
    .then((res) => {
      // 加载完成
      if (res.code === 200) {
        fileList.value = res.data
        total.value = res.total
      }
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

const cateList = ref(undefined) // 文档目录
/** 获取类别下拉树结构 */
function _getCategoryListSelect() {
  getCategoryListSelect({
    includeStop: false,
    auth: true,
  }).then((response) => {
    cateList.value = handleTree(response.data, 'id')
  })
}
_getCategoryListSelect()

const fileList = ref([])
// 总页数
const total = ref(0)
// 分页参数
let queryParams = reactive({
  curPage: 1,
  pageSize: 20,
  searchValue: '',
  docSizeLevel: '0',
})

function handleQuery() {
  queryParams.curPage = 1
  // delete queryParams.categoryId
  getFileList()
}
function fileAction(data) {
  if (data.type === 1) {
    moveFile(data.parmas).then((res) => {
      if (res.data) {
        getFileList()
      }
    })
  } else {
    copyFile(data.parmas).then((res) => {
      if (res.data) {
        getFileList()
      }
    })
  }
}
// 请求列表方法
function getFileList() {
  // 加载中
  loading.value = true
  getFile(queryParams).then((res) => {
    fileList.value = res.data
    total.value = res.total
    loading.value = false
  })
}
initList(queryParams)
</script>

<style lang="scss" scoped>
.w450 {
  width: 100%;
  &.el-input {
    height: 40px;
    width: 100% !important;
  }
}
.file-list {
  height: calc(100vh - 184px);
  margin-top: 10px;
  overflow-y: auto;
  padding-right: 4px;
}
@media (max-width: 1800px) {
  .file-list {
    height: calc(100vh);
  }
}
.filter {
  font-size: 14px;
  .line-filter {
    margin-top: 5px;
    .active {
      color: #409eff;
    }
  }
  .types {
    .active {
      color: #409eff;
    }
  }
  span {
    margin-left: 5px;
    cursor: pointer;
  }
  margin-top: 20px;
  /* > div {
    margin-left: 50px;
  } */
}
.left,
.right {
  margin-top: 30px;
}
.middle {
  display: flex;
  flex-direction: column;
  padding: 0 30px;
}
.search {
  display: flex;
  justify-content: center;
  :deep(.el-input__inner) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  :deep(.el-button) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
:deep(.pagination-container) {
  background: initial;
  padding: 10px 16px;
}
</style>
